<template>
	<!-- 弹出层 -->
	<uni-popup ref="dialog">
		<!-- 弹出层分上中下三层 宽度这里使用百分比不能生效，直接给固定值  背景颜色为白色，给个8rpx的圆角-->
		<view style="width: 600upx;" class="bg-white rounded">
			<!-- 标题行，采用flex布局，内容xy轴都居中， 下边线，下边线的颜色为浅灰色 -->
			<view class="flex align-center justify-center font-weight-bold border-bottom border-light-secondary"
				style="height: 100upx;">
				{{title}}
			</view>
			<!-- 中间内容部分 -->
			<view class="flex align-center justify-center">
				<!-- 中间内容改为插槽 -->
				<slot></slot>
			</view>
			<!-- 底部操作按钮 -->
			<view class="flex border-top border-light-secondary" style="height: 100upx;">
				<view class="flex-1 text-muted flex align-center justify-center" @tap="cancel">{{cancelText}}</view>
				<view class="flex-1 text-main flex align-center justify-center" @tap="confirm">{{confirmText}}</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	//引入uni-popup组件
	import uniPopup from '@/components/uni-ui/uni-popup/uni-popup.vue';
	export default {
		components: {
			uniPopup
		},
		//在props中定义从父组件中接收哪些属性
		props: {
			title: {
				type: String,
				default: "提示"
			},
			cancelText: {
				type: String,
				default: "取消"
			},
			confirmText: {
				type: String,
				default: "确定"
			}
		},
		data() {
			return {
				//在data里面定义这个callback，接收父组件传入的 callback
				callback: false,

			}
		},
		methods: {
			//打开的时候，接收父组件传入的 callback
			open(callback = false) {
				//将父组件的callback参数，存入到data的callback
				this.callback = callback
				this.$refs.dialog.open()
			},
			cancel() {
				this.$refs.dialog.close()
			},
			confirm() {
				//点击确定的时候，判断callback的类型
				if (typeof this.callback === "function") {
					//如果callback是个函数，那就执行
					this.callback(() => {
						this.cancel()
					})
				} else {
					//如果callback不是个函数，就提交给父组件
					this.$emit("confirm")
					//然后调用	this.cancel()关闭dialog
					this.cancel()
				}

			}
		}
	}
</script>

<style>
</style>
